<template>
    <div class="page_container">
        <div class="page_container_scroll">
            <a-card :bordered="false" class="mb-2">
                <a-form ref="searchFormRef" name="advanced_search" :model="searchFormState"
                    class="ant-advanced-search-form">
                    <a-row :gutter="24" class="mb-2">
                        <a-col :span="6">
                            <a-form-item label="项目名称" name="name">
                                <a-input v-model:value="searchFormState.name" placeholder="请输入项目名称" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="6">
                            <a-form-item label="项目编号" name="code">
                                <a-input v-model:value="searchFormState.code" placeholder="请输入项目编号" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="6">
                            <a-form-item label="项目名称" name="proName">
                                <a-input v-model:value="searchFormState.proName" placeholder="请输入项目名称" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="6" v-show="advanced">
                            <a-form-item label="项目经理" name="projectManager">
                                <a-select :getPopupContainer="trigger => trigger.parentNode" ref="select" v-model:value="searchFormState.projectManager"></a-select>
                            </a-form-item>
                        </a-col>
                        <a-col :span="6" v-show="advanced">


                            <a-form-item label="创建日期" name="createDate">
                                <a-row>
                                    <a-range-picker v-model:value="searchFormState.createDate" style="width: 100%;" />
                                </a-row>
                            </a-form-item>
                        </a-col>
                        <a-col :span="6" v-show="advanced">
                            <a-form-item label="发起人" name="director">
                                <a-select :getPopupContainer="trigger => trigger.parentNode" ref="select" v-model:value="searchFormState.director"></a-select>
                            </a-form-item>
                        </a-col>
                        <a-col :span="6" v-show="advanced">
                            <a-form-item label="投标结果" name="bidResult">
                                <a-select :getPopupContainer="trigger => trigger.parentNode" v-model:value="searchFormState.bidResult" style="width: 100%">
                                    <a-select-option value="1">中标</a-select-option>
                                    <a-select-option value="0">未中标</a-select-option>
                                </a-select>

                            </a-form-item>
                        </a-col>

                        <a-col :span="6">
                            <a-button type="primary" @click="tableRef.refresh(true)">查询</a-button>
                            <a-button style="margin: 0 8px" @click="reset">重置</a-button>
                            <a @click="toggleAdvanced" style="margin-left: 8px">
                                {{ advanced ? '收起' : '展开' }}
                                <component :is="advanced ? 'up-outlined' : 'down-outlined'" />
                            </a>
                        </a-col>
                    </a-row>
                </a-form> </a-card>
            <a-card :bordered="false">
                <s-table ref="tableRef" tableLayout="fixed" :data="loadData" bordered :row-key="(record) => record.id"
                    :tool-config="toolConfig" :columns="columns" :scroll="{ x: 1400, }" class="mb-2">

                    <template #operator class="table-operator">
                        <div style="display: flex; justify-content: space-between">
                            <a-select :getPopupContainer="trigger => trigger.parentNode" v-model:value="searchFormState.role" style="width: 120px" :options="roles"
                                :fieldNames="{ label: 'label', value: 'value' }" placeholder="本人">
                            </a-select>
                            <!-- <a-space>
                            <a-button type="primary" @click="showEdit()">
                                <template #icon>
                                    <plus-outlined />
                                </template>
<span>新增</span>
</a-button>
</a-space> -->
                        </div>
                    </template>
                    <template #bodyCell="{ column, record, index }">
                        <template v-if="column.key === 'index'">
                            {{ index + 1 }}
                        </template>
                        <template v-if="column.key === 'stateText'">
                            <stateTag :value="record.stateText" />
                        </template>

                        <template v-if="column.key === 'bidResult'">
                            {{ record.bidResult == 1 ? '中标' : '未中标' }}
                        </template>

                        <template v-if="column.key === 'control'">
                            <div>
                                <a @click="pminfoOnOpen(record)">查看</a>

                                <a-divider type="vertical" />
                                <a-popconfirm title="确定要终止此投标吗？" @confirm="stop(record)">
                                    <a-button danger size="small">项目终止</a-button>
                                </a-popconfirm>
                                <a-divider type="vertical" />
                                <a-button @click="onBid(record)" v-if="!record.bidWinTime" type="primary"
                                    size="small">中标登记</a-button>

                            </div>
                        </template>
                    </template>
                </s-table>
            </a-card>
            <a-drawer :title="'中标登记'" :width="800" :visible="showBidEdit" :body-style="{ paddingBottom: '80px' }"
                placement="right" :style="{ position: 'absolute' }" :footer-style="{ textAlign: 'right' }"
                @close="onClose">
                <div>
                    <bidInput @onClose="onClose" ref="editRef"></bidInput>
                </div>
                <template #footer>
                    <a-button type="primary" @click="submit">保存</a-button>
                    <a-button style="margin-left: 10px" @click="onClose">取消</a-button>
                </template>
            </a-drawer>
            <pminfo ref="pminfoRef" @OnClose="pminfoOnClose"></pminfo>
        </div>
    </div>
</template>

<script setup name="steps">
import api from '@/api/pm/bid/index'
import proApi from '@/api/pm/pm/index'
import pminfo from './components/info.vue'
import bidInput from './components/input.vue'
import { roles } from '@/utils/constants.js'
import stateTag from '@/components/Task/stateTag.vue'
const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false }
const tableRef = ref()
const props = defineProps({
    proId: {
        type: Number,
    },
})
// 查询区域显示更多控制
const advanced = ref(false)
const showBidEdit = ref(false)
const toggleAdvanced = () => {
    advanced.value = !advanced.value
}

const { proId } = toRefs(props)
const visible = ref(false);
const pminfoVisible = ref(false);
const showFliter = ref(false)

const searchFormState = ref({})
const editRef = ref()
const onBid = (record) => {
    showBidEdit.value = true
    // editRef.value.show(record)
    nextTick(() => {
        editRef.value.show(record)
    })

}
const onClose = () => {
    showBidEdit.value = false
}
const submit = () => {
    editRef.value.submit()
}
const bidId = ref()

const columns = [
    {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        width: 70,
        align: "center",
    },
    {
        title: '项目编号',
        dataIndex: 'proCode',
        key: 'proCode',
        width: 180,
        align: "center",
    },
    {
        title: '项目名称',
        dataIndex: 'proName',
        key: 'proName',
        width: 180,
        align: "center",
    },
    // {
    //     title: '投标阶段',
    //     dataIndex: 'step',
    //     key: 'step',
    //     width: 140,
    //     align: "center",
    // },
    {
        title: '审批状态',
        dataIndex: 'stateText',
        key: 'stateText',
        width: 180,
        align: "center",
    },
    {
        title: '方案报价（元）',
        dataIndex: 'bidPlanAmount',
        key: 'bidPlanAmount',
        width: 180,
        align: "center",

    },
    {
        title: '中标金额',
        dataIndex: 'bidAmount',
        key: 'bidAmount',
        width: 120,
        align: "center",
    },

    // {
    //     title: '发起人',
    //     dataIndex: 'initiatorName',
    //     key: 'initiatorName',
    //     width: 180,
    //     align: "center",

    // },


    {
        title: '投标结果',
        dataIndex: 'bidResult',
        key: 'bidResult',
        width: 180,
        align: "center",
    },
    {
        title: '中标日期',
        dataIndex: 'bidWinTime',
        key: 'bidWinTime',
        width: 180,
        align: "center",
    },
    {
        title: '丢标原因',
        dataIndex: 'realcost',
        key: 'realcost',
        width: 180,
        align: "center",
    },
    // {
    //     title: '预算偏差率',
    //     dataIndex: 'budgetuserate',
    //     key: 'budgetuserate',
    // },
    {
        title: '操作',
        dataIndex: 'control',
        key: 'control',
        width: 240,
        align: "center",
        fixed: "right"
    },
]


const loadData = (parameter) => {
    searchFormState.value.current = parameter.current
    searchFormState.value.size = parameter.size
    return api.page(searchFormState.value).then((res) => {

        return res
    })

}

const refresh = (pId) => {
    console.log("fatch proId", pId)
}
// 重置表单，且设置默认值
const reset = () => {
    searchFormState.value = {}
}
watch(proId, () => {
    refresh(proId.value);
});




const remove = (record) => {
    console.log("remove id", record)
    api.delete([{ id: record.id }]).then(() => {
        tableRef.refresh(true)
    })
}

const stop = (record) => {
    console.log("stop id", record)
    proApi.stop({ id: record.proId }).then(() => {
        tableRef.refresh(true)
    })
}



const add = () => {
    visible.value = true;
}

const OnClose = (value) => {
    console.log("edit is close", value);
    visible.value = false
}

const pminfoRef = ref()
const pminfoOnOpen = (record) => {
    bidId.value = record.id;
    pminfoRef.value.show(record);
}
const pminfoOnClose = () => {
    console.log("pminfo is close");

}


</script>
<style scoped></style>
